<template>
	<view class="page-e tn-safe-area-inset-bottom" style="height: 100%; overflow-y: scroll;">
		<!-- 顶部自定义导航 -->
		<!-- 		<tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<view class="custom-nav__back">
					<view class="tn-icon-flower-fill tn-color-gray" style="font-size: 50rpx;color: #F1C68E !important;">
					</view>
				</view>
			</view>
		</tn-nav-bar> -->
		<!-- 
		<view class="top-backgroup">
			<image src='https://tnuiimage.tnkjapp.com/my/my-bg4.png' mode='widthFix' class='backgroud-image'></image>
		</view> -->

		<view class="tn-margin-left tn-margin-right" :style="{ paddingTop: 10 + 'px' }">
			<!-- 图标logo/头像 -->
			<view v-if="hashLogin" class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
				<view class="justify-content-item">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left">
						<view class="logo-pic tn-shadow" style="box-shadow: none" @click="goAboutMe">
							<!-- <image style="width: 60px;height: 60px;border-radius: 50%;" :src="userInfo.headImageUrl"
								mode=""></image> -->
							<image style="width: 60px; height: 60px; border-radius: 50%" :src="userInfo.header" mode="">
							</image>
						</view>
						<view class="tn-padding-right">
							<view class="tn-padding-right tn-padding-left-sm">
								<text style="color: #6e58aa; font-size: 14px; font-weight: 900">
									{{ userInfo.nickName }}</text>
								<view class="uid">
									<view class="left"> ID: </view>
									<view class="right">
										{{ userInfo.uid }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 没有授权，则显示这个授权按钮-->
			<view v-else class="tn-flex tn-flex-row-between">
				<view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center" @click="goLogin">
					<tn-button shape="round" backgroundColor="#1D2541" fontColor="#ffffff" padding="20rpx 0" width="40%"
						shadow>
						<text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text>
						<text class="">授权登录</text>
					</tn-button>
				</view>
			</view>
			<view v-if="hashLogin">
				<view v-if="userInfo.isMember" class="memberBtn">
					<!-- 				<image v-if="userInfo.membershipType == 'monthly'" src="../../static/imgs/monthMember.png" alt="" />
					<image v-else-if="userInfo.membershipType == 'annual'" src="../../static/imgs/yearMember.png"
						alt="" />
					<image v-else-if="userInfo.membershipType == 'quarter'" src="../../static/imgs/jMember.png"
						alt="" /> -->
					<text v-if="userInfo.membershipType == 'monthly'">包月会员</text>
					<text v-else-if="userInfo.membershipType == 'annual'">包季会员</text>
					<text v-else-if="userInfo.membershipType == 'quarter'">包年会员</text>
					<view class="btn" @click="toCashOut"> 续费 </view>
					<view class="tipText" v-if="daysDiff > 7" style="width: 240px; color: #fff">
						尊贵的会员用户，请享受更科学、更高效、更安全的训练吧,给你的健身事业上科技！
					</view>
					<view class="tipText" v-else>
						您的会员身份将在
						<text class="day">
							{{ daysDiff }} </text>天后过期，为不影响您的使用体验，请尽快续费！
					</view>
				</view>

				<view v-else>
					<view class="becomeMember">
						<view class="text"> 成为会员 </view>
						<view class="tip">
							解锁全部会员特权，享受更科学、更高效、更安全的训练,给你的健身事业上科技！
						</view>
						<view class="btn" @click="toCashOut"> 充值入口 </view>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0px 15px; border-radius: 8px">
			<view class="tn-margin-top-lg tn-padding-top-sm tn-padding-bottom-sm"
				style="background-color: #fff; border-radius: 8px">
				<tn-list-cell style="background-color: red" :hover="true" :unlined="true" :radius="true" :fontSize="30"
					@click="goInvitation">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7c8191">
							<view class="tn-icon-flower"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">入驻邀请</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="goBusinessList">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7c8191">
							<view class="tn-icon-image-text"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">已入驻商家</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>

				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" @click="temp">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7c8191">
							<view class="tn-icon-gift"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%">
							<view class="tn-margin-left-sm">兑换码</view>
							<view class="tn-color-gray tn-icon-right"></view>
						</view>
					</button>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="goNav">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7c8191">
							<view class="tn-icon-tips"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">使用教程</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell style="background-color: red" :hover="true" :unlined="true" :radius="true" :fontSize="30"
					@click="goKefu">
					<!-- <button open-type="contact"
						style="height: inherit; text-align: left;font-size:inherit;margin: 0px;padding: 0px;background-color: #FFFFFF00;"> -->
					<button open-type="contact" class="tn-flex tn-flex-col-center tn-button--clear-style"
						style="text-align: left">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7c8191">
							<view class="tn-icon-service"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">人工客服</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</button>
					<!-- </button> -->
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" @click="user_recall">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7c8191">
							<view class="tn-icon-allday"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%">
							<view class="tn-margin-left-sm">问题反馈</view>
							<view class="tn-color-gray tn-icon-right"></view>
						</view>
					</button>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" @click="goSetting">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7c8191">
							<view class="tn-icon-install"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%">
							<view class="tn-margin-left-sm">设置</view>
							<view class="tn-color-gray tn-icon-right"></view>
						</view>
					</button>
				</tn-list-cell>
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30" @click="goAbout">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7c8191">
							<view class="tn-icon-message"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%">
							<view class="tn-margin-left-sm">关于</view>
							<view class="tn-color-gray tn-icon-right"></view>
						</view>
					</view>
				</tn-list-cell>

				<!-- <view class="juzhong" >
						<button class="juzhong" style="border: 1px solid black; width: 150rpx;" >入口</button>
					</view> -->
				<view class="juzhong">
					<button class="juzhong" style="
              border: none;
              background-color: transparent;
              color: transparent;
              width: 150rpx;
            " @click="handleClick">
						入口
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		reqMember
	} from "../../apis/mine";
	import Countdown from "@/components/countdown/countdown.vue";
	export default {
		data() {
			return {
				clickCount: 0, // 点击次数
				hashLogin: false,
				userInfo: {
					expirationDate: "2025-12-21T04:13:06",
					isMember: false,
					membershipType: "monthly",
					uid: "10100",
					headImageUrl: "",
					nickName: "",
				}, //用户信息
				daysDiff: 0,
			};
		},
		onShow() {
			this.getMember();
			this.hashLogin = uni.getStorageSync("hashLogin") || false;
			// 获取本地存储的登录状态
			const isLoggedIn = uni.getStorageSync('hashLogin');

			if (!isLoggedIn) {
				// 未登录，跳转到登录页
				// console.log("未登录，跳转登录页");
				// uni.navigateTo({
				// 	url: '/pages/loginA/loginA', // 登录页面路径
				// });
			}
		},
		methods: {
			handleClick() {
				// 增加点击次数
				this.clickCount++;
				console.log("当前点击次数:", this.clickCount); // 打印当前点击次数，方便调试

				// 如果点击次数达到10次，执行成功操作
				if (this.clickCount >= 10) {
					// console.log('点击了10次');
					this.successAction();
				}
			},

			// 人工客服
			goKefu() {},
			// 执行成功后的操作
			successAction() {
				this.clickCount = 0;
				// 成功后跳转到目标页面
				uni.navigateTo({
					url: "/pagesMine/serect/serect", // 跳转路径，确保路径正确
				});
			},

			goBusinessList() {
				uni.navigateTo({
					url: "/pagesMine/business_list/business_list",
				});
			},
			manager_enter() {
				uni.navigateTo({
					url: "/pagesMine/serect/serect",
				});
			},
			temp() {
				uni.navigateTo({
					url: "/pagesMine/exchange/exchange",
				});
			},
			user_recall() {
				uni.navigateTo({
					url: "/pagesMine/question/question",
				});
			},
			getMember() {
				reqMember().then((res) => {
					console.log(res);
					let userInfo = uni.getStorageSync("userInfo");
					userInfo.expirationDate = res.data.expirationDate;
					userInfo.isMember = res.data.isMember;
					userInfo.membershipType = res.data.membershipType;
					userInfo.uid = res.data.uid;
					const daysDiff = Math.ceil(
						(new Date(userInfo.expirationDate) - new Date()) / (1000 * 3600 * 24)
					);
					this.daysDiff = daysDiff;
					this.userInfo = userInfo;
					uni.setStorageSync("userInfo", userInfo);
				});
			},
			// 签到
			goSignIn() {
				uni.navigateTo({
					url: "/pagesMine/sign/sign",
				});
			},
			goQuestion() {
				uni.navigateTo({
					url: "/pagesMine/question/question",
				});
			},
			goAbout() {
				uni.navigateTo({
					url: "/pagesMine/about/about",
				});
			},
			goSetting() {
				uni.navigateTo({
					url: "/pagesMine/setting/setting",
				});
			},
			// 收货地址
			// navAddress() {
			// 	uni.chooseAddress({})
			// },
			// 单纯短震动
			short() {
				wx.vibrateShort();
			},
			// 提现模板
			goCash() {
				uni.navigateTo({
					url: "/pagesMine/cashOut/cashOut",
				});
			},
			// lodash
			goLodash() {
				uni.navigateTo({
					url: "/pagesMine/lodash/lodash",
				});
			},
			// 壁纸首页
			goDiscover() {
				uni.navigateTo({
					url: "/pagesMine/discovery/discovery",
				});
			},
			// 关于作者
			goInvitation() {
				uni.navigateTo({
					url: "/pagesMine/invitation/invitation",
				});
			},
			// 自定义导航栏教程
			goNav() {
				uni.navigateTo({
					url: "/pagesMine/useinfo/useinfo",
				});
			},
			// 刷新记录模板
			goRecords() {
				uni.navigateTo({
					url: "/pagesMine/records/records",
				});
			},
			toCashOut() {
				uni.navigateTo({
					url: "/pagesMine/cashOut/cashOut",
				});
			},
			// 简约登录
			goLogin() {
				uni.navigateTo({
					url: "/pagesExtra/loginA/loginA",
				});
			},
			// 普通登录
			goLoginS() {
				uni.navigateTo({
					url: "/pagesMine/login/login",
				});
			},
			// 订单列表模板
			goOrder() {
				uni.navigateTo({
					url: "/pagesMine/order/order",
				});
			},
			// 表单编辑
			goForm() {
				uni.navigateTo({
					url: "/pagesMine/form/form",
				});
			},
			//拨打固定电话
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: "17738531107",
				});
			},
			// 复制微信
			copyWeChat() {
				wx.vibrateShort();
				uni.setClipboardData({
					data: "Akaibiu",
				});
			},
			// 我的信息
			goAboutMe() {
				// uni.navigateTo({
				// 	url: '/pagesMine/userinfo/userinfo'
				// })
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		// background-color: rgba(110, 88, 170, 0.02);
		padding: 10px 10px;
	}

	.memberBtn {
		// width: 299px;
		width: 100%;
		padding: 5px 20px;
		margin: 0 auto;
		border-radius: 16px;
		background: linear-gradient(90deg, #6e59aa 10%, #a9d3e0 90%);
		position: relative;
		margin-top: 10px;

		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
		filter: blur(0px);

		text {
			color: #fff;
			font-family: "优设标题黑";
			font-size: 20px;
		}

		image {
			width: 74px;
			height: 26px;
		}

		.btn {
			position: absolute;
			border-radius: 5px;
			background-color: #fff;
			box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
			padding: 4px 11px;
			right: 12px;
			top: 50%;
			transform: translate(0%, -50%);
			color: #6e58aa;
			font-family: "优设标题黑";
		}

		.tipText {
			font-size: 12px;
			color: #fff;
			text-align: left;
			width: 200px;
			padding-left: 4px;
			color: rgba(212, 212, 212, 1);
			margin-bottom: 6px;

			font-family: "优设标题黑";

			.day {
				font-size: 14px;

				color: rgba(56, 56, 56, 1);
				padding: 0 2px;
			}
		}
	}

	.becomeMember {
		width: 100%;
		border-radius: 4px;
		background: linear-gradient(90deg, #6e58aa 0%, #ffae9d 100%);
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
		filter: blur(0px);
		padding: 8px 20px;
		position: relative;
		color: #fff;
		font-family: "优设标题黑";

		.text {
			font-size: 18px;
			font-weight: 400;
		}

		.tip {
			width: 210px;
			margin-top: 5px;
			font-size: 10px;
			font-weight: 400;
		}

		.btn {
			position: absolute;
			border-radius: 5px;
			background-color: #fff;
			box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
			padding: 4px 6px;
			right: 12px;
			top: 50%;
			color: #6e58aa;
			transform: translate(0%, -50%);
		}
	}

	.uid {
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;

		.left {
			color: rgba(110, 88, 170, 1);
			font-weight: 900;
			font-size: 10px;
		}

		.right {
			margin-left: 3px;
			border-radius: 16px;
			border-radius: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 3px 7px;
			font-size: 10px;
			background: linear-gradient(135deg,
					rgba(110, 88, 170, 1) 10%,
					rgba(175, 224, 230, 1) 90%);
			box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.15),
				inset 2px 2px 1px rgba(0, 0, 0, 0.15);
			color: #fff;
			font-family: "优设标题黑";
		}
	}

	.page-e {
		max-height: 100vh;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.tn-color-wallpaper {
		color: #1d2541;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}

	/* 自定义导航栏内容 end */
	/* 顶部背景图 start */
	.top-backgroup {
		margin-top: 20rpx;
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */
	/* 图标容器5 start */
	.icon5 {
		&__item {
			// width: 30%;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 0rpx;
			margin: 0rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;
			}
		}
	}

	/* 用户头像 start */
	.logo-image {
		width: 110rpx;
		height: 110rpx;
		position: relative;
		overflow: hidden;
		border-radius: 50%;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 8rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 页面阴影 start*/
	.wallpaper-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 页面阴影 end*/
	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
				}
			}
		}
	}

	/* 图标容器12 start */
	.icon12 {
		&__item {
			width: 30%;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 15rpx;
				height: 15rpx;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 38rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
				}
			}
		}
	}

	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #ffffff;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 40rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器1 end */
	.button-shake {
		animation: shake 4s infinite;
	}

	@keyframes shake {

		5%,
		50% {
			transform: scale(1);
		}

		10% {
			transform: scale(0.9);
		}

		15% {
			transform: scale(1.15);
		}

		20% {
			transform: scale(1.15) rotate(-5deg);
		}

		25% {
			transform: scale(1.15) rotate(5deg);
		}

		30% {
			transform: scale(1.15) rotate(-3deg);
		}

		35% {
			transform: scale(1.15) rotate(2deg);
		}

		40% {
			transform: scale(1.15) rotate(0);
		}
	}

	/* 背景波浪高度 */
	.button-number {
		width: 100%;
		height: 150rpx;
		border-radius: 15rpx;
		position: relative;
		z-index: 1;
	}

	/* 动态背景波浪*/
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1);
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1);
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1);
		}
	}

	.tnwave {
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		z-index: -1;
		border-radius: 15rpx;
	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}

	.bgTop {
		opacity: 0.1;
	}

	.waveTop {
		background-size: 50% 90rpx;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.2;
	}

	.waveMiddle {
		background-size: 50% 80rpx;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.3;
	}

	.waveBottom {
		background-size: 50% 70rpx;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}
</style>